<template>
  <div style="width: 95%;height:630px;margin:0 auto ;overflow-y: auto;">
    <el-row>
      <div style="font-size: 30px;">
        <b>早上好，Daisy!</b>
      </div>
    </el-row>
    <br />
    <br />
    <el-row>
      <el-col :span="5">
        <el-card style="background-color:#2561ef;border-radius: 20px;height:160px" shadow="hover">
          <el-row>
            <el-col :span="12" style="font-weight: bold;">
              <div>
                <a style="font-size: 40px;color:antiquewhite;margin-left:15px">{{ PayCustomNumber }}</a>
              </div>
              <br />
              <div>
                <a style="font-size: 15px;color:antiquewhite;margin-left:15px">支付订单人数</a>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="circle">
                <img src="../../assets/订单.png" class="circle-img" />
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="5" :offset="1">
        <el-card style="background-color:#ff6262;border-radius: 20px;height:160px" shadow="hover">
          <el-row>
            <el-col :span="12" style="font-weight: bold;">
              <div>
                <a style="font-size: 40px;color:antiquewhite;margin-left:15px">{{ number1 }}</a>
              </div>
              <br />
              <div>
                <a style="font-size: 15px;color:antiquewhite;margin-left:15px">支付订单总数</a>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="circle">
                <img src="../../assets/钻石宝石.png" class="circle-img" />
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="5" :offset="1">
        <el-card style="background-color:#28d094;border-radius: 20px;height:160px" shadow="hover">
          <el-row>
            <el-col :span="12" style="font-weight: bold;">
              <div>
                <a style="font-size: 40px;color:antiquewhite;margin-left:15px">{{ number2 }}￥</a>
              </div>
              <br />
              <div>
                <a style="font-size: 15px;color:antiquewhite;margin-left:15px;">今日收入</a>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="circle">
                <img src="../../assets/理财.png" class="circle-img" />
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="5" :offset="1">
        <el-card style="background-color:#ffc71c;border-radius: 20px;height:160px" shadow="hover">
          <el-row>
            <el-col :span="12" style="font-weight: bold;">
              <div>
                <a style="font-size: 40px;color:antiquewhite;margin-left:15px">{{ number3 }}</a>
              </div>
              <br />
              <div>
                <a style="font-size: 15px;color:antiquewhite;margin-left:15px">今日有效咨询</a>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="circle">
                <img src="../../assets/访客.png" class="circle-img" />
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="11">
        <el-row>
          <el-card style="height: 150px;border-radius: 20px;">
            <div>
              <a style="font-size:large;color:#2561ef">
                <b>&nbsp;|&nbsp;</b>
              </a>&nbsp;待处理订单
            </div>
            <br />
            <el-row>
              <el-col :span="6" :offset="1" class="centered-col">
                <div class="text-center">待付款订单</div>
                <div class="number">{{ number11 }}</div>
              </el-col>
              <el-col :span="6" :offset="1" class="centered-col">
                <div class="text-center">待发货订单</div>
                <div class="number">{{ number12 }}</div>
              </el-col>
              <el-col :span="6" :offset="1" class="centered-col">
                <div class="text-center">待售后订单</div>
                <div class="number">{{ number13 }}</div>
              </el-col>
            </el-row>
          </el-card>
        </el-row>
        <br />
        <el-row>
          <el-card style="height: 270px;border-radius: 20px;">
            <div>
              <a style="font-size:large;color:#2561ef">
                <b>&nbsp;|&nbsp;</b>
              </a>&nbsp;快捷操作
            </div>
            <br />
            <el-row>
              <!-- 第一排 -->
              <el-col :span="3" style="margin-left: 15px;">
                <div class="circle2">
                  <img src="../../assets/fastoperator/24gf-folderPlus.png" class="circle-img2" />
                </div>
                <div>发布商品</div>
              </el-col>
              <el-col :span="3" :offset="2">
                <div class="circle2">
                  <img src="../../assets/fastoperator/客户管理.png" class="circle-img2" />
                </div>
                <div>客户管理</div>
              </el-col>
              <el-col :span="3" :offset="2">
                <div class="circle2">
                  <img src="../../assets/fastoperator/文件夹.png" class="circle-img2" />
                </div>
                <div style="margin-left: 3px;">&nbsp;商品库</div>
              </el-col>
              <el-col :span="3" :offset="2">
                <div class="circle2">
                  <img src="../../assets/fastoperator/发送.png" class="circle-img2" />
                </div>
                <div>种草管理</div>
              </el-col>
              <el-col :span="3" :offset="2">
                <div class="circle2">
                  <img src="../../assets/fastoperator/订单-全部订单.png" class="circle-img2" />
                </div>
                <div>全部订单</div>
              </el-col>
            </el-row>
            <br />
            <el-row>
              <!-- 第二排 -->
              <el-col :span="3" style="margin-left: 15px;">
                <div class="circle2">
                  <img src="../../assets/fastoperator/党群心连心.png" class="circle-img2" />
                </div>
                <div>售后管理</div>
              </el-col>
              <el-col :span="3" :offset="2">
                <div class="circle2" @click="toAnswer">
                  <img src="../../assets/fastoperator/客服.png" class="circle-img2" />
                </div>
                <div>即时会话</div>
              </el-col>
            </el-row>
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-row>
          <el-col>
            <el-card style="height: 443px;border-radius: 20px;">
              <div>
                <a style="font-size:large;color:#2561ef">
                  <b>&nbsp;|&nbsp;</b>
                </a>&nbsp;订单类型占比
              </div>
              <div style="width:450px;height:450px;margin:0 auto" ref="bar"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="23">
        <el-card style="height: 500px;border-radius: 20px;">
          <div>
            <a style="font-size:large;color:#2561ef">
              <b>&nbsp;|&nbsp;</b>
            </a>&nbsp;交易概况
          </div>
          <div style="width:100%;height:400px">
            <div style="width:100%;height:400px" ref="tar"></div>
          </div>

          <div style="margin: 0 auto;padding-left:100px">
            <el-radio-group v-model="radio1" @change="changeRadio">
              <el-radio :label="1" style="margin-left: 100px;">支付订单数</el-radio>
              <el-radio :label="2" style="margin-left: 100px;">支付人数</el-radio>
              <el-radio :label="3" style="margin-left: 100px;">支付金额</el-radio>
              <el-radio :label="4" style="margin-left: 100px;">咨询人数</el-radio>
            </el-radio-group>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <br />
    <br />
    <br />
  </div>
</template>
  <script>


export default {
  data() {
    return {
      PayCustomNumber: "0",
      number2: "0",
      number1: "0",
      number11: "0",
      number12: "0",
      number13: "0",
      echartsData1: [],
      radio1: 1,
      number3: "",
      echartsDate:"",
      dadaForEcharts1:[],
      dadaForEcharts2:[],
      dadaForEcharts3:[],
      dadaForEcharts4:[],
      finalData:[]
    };
  },
  methods: {
    changeRadio(){
      switch (this.radio1) {
        case 1:
          this.finalData = this.dadaForEcharts1;
          break;
        case 2:
          this.finalData = this.dadaForEcharts2;
          break;
        case 3:
          this.finalData = this.dadaForEcharts3;
          break;
        case 4:
          this.finalData = this.dadaForEcharts4;
          break;
        default:
          this.finalData = [];
      }

      // 更新图表
      this.echartsInit2();
    },

    queryAllDateForEcharts(){
      this.$axios.get("api/order-server/queryAllDateForEcharts").then(res=>{//支付订单detail数组
        console.log(res)
        this.dadaForEcharts1 = res.data.data.dadaForEcharts1
        this.dadaForEcharts2 = res.data.data.dadaForEcharts2
        this.dadaForEcharts3 = res.data.data.dadaForEcharts3
        this.dadaForEcharts4 = res.data.data.dadaForEcharts4
        this.finalData = this.dadaForEcharts1
      })
    },

    getLastFourDaysAndToday() {
      const today = new Date();
      const dates = [];

      for (let i = 4; i >= 0; i--) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份是从0开始的，所以需要+1，并补零
        const day = date
          .getDate()
          .toString()
          .padStart(2, "0"); // 补零
        dates.push(`${month}-${day}`);
      }

      this.echartsDate = dates
    },
    isGoingToShouhou() {
      this.$axios.get("api/order-server/shouhou/isGoingToShouhou").then(res => {
        this.number13 = res.data.data;
      });
    },
    isGoingToFahuo() {
      this.$axios.get("api/order-server/isGoingToFahuo").then(res => {
        this.number12 = res.data.data;
      });
    },
    isGoingToPay() {
      this.$axios.get("api/order-server/isGoingToPay").then(res => {
          this.number11 = res.data.data;
      });
    },
    infoNumber() {
      this.$axios.get("api/custom-server/chat/infoNumber").then(res => {
        this.number3 = res.data.data;
      });
    },
    payMoneyNumber() {
      this.$axios.get("api/order-server/payMoneyNumber").then(res => {
        if (res.data.data != null) {
          this.number2 = res.data.data;
        }
      });
    },
    payOrderDetailNumber() {
      this.$axios.get("api/order-server/payOrderDetailNumber").then(res => {
        this.number1 = res.data.data;
      });
    },
    queryPayCustomNumber() {
      this.$axios.get("/api/order-server/queryPayCustomNumber").then(res => {
        this.PayCustomNumber = res.data.data;
      });
    },
    toAnswer() {
      this.$router.push({ path: "/AnswerQuery" });
    },
    echartsInit() {
      debugger;
      var myChart = this.$echarts.init(this.$refs.bar);
      var option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: this.echartsData1
            // data: [
            //   { value: 1048, name: "Search Engine" },
            //   { value: 735, name: "Direct" },
            //   { value: 580, name: "Email" },
            //   { value: 484, name: "Union Ads" },
            //   { value: 300, name: "Video Ads" }
            // ]
          }
        ]
      };
      myChart.setOption(option);
    },
    echartsInit2() {
      debugger;
      var myChart = this.$echarts.init(this.$refs.tar);
      var option = {
        xAxis: {
          type: "category",
          data: this.echartsDate
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: this.finalData,
            type: "line"
          }
        ]
      };
      myChart.setOption(option);
    },
    queryOrderDetailTypeNumber() {
      this.$axios
        .get("api/order-server/queryOrderDetailTypeNumber")
        .then(res => {
          this.echartsData1 = res.data.data;
        });
    }
  },
  mounted() {
    setTimeout(() => {
      this.echartsInit();
      this.echartsInit2();
    }, 500);
    window.vue = this;
  },
  created() {
    this.queryAllDateForEcharts();
    this.getLastFourDaysAndToday();
    this.queryPayCustomNumber();
    this.queryOrderDetailTypeNumber();
    this.payOrderDetailNumber();
    this.payMoneyNumber();
    this.infoNumber();
    this.isGoingToFahuo();
    this.isGoingToShouhou();
    this.isGoingToPay();
  }
};
</script>
  
  <style scoped>
.circle {
  width: 50px; /* 圆形的宽度 */
  height: 50px; /* 圆形的高度 */
  background-color: white; /* 圆形背景颜色 */
  border-radius: 50%; /* 使元素变为圆形 */
  display: flex;
  margin-top: 30px;
  margin-left: 60px;
  overflow: hidden; /* 确保图片不会超出圆形边界 */
}
.circle2 {
  width: 60px; /* 圆形的宽度 */
  height: 60px; /* 圆形的高度 */
  background-color: #e6f1ff; /* 圆形背景颜色 */
  border-radius: 50%; /* 使元素变为圆形 */
  display: flex;
  overflow: hidden; /* 确保图片不会超出圆形边界 */
}
.circle-img {
  margin-top: 10px;
  margin-left: 10px;
  height: 30px;
  width: 30px;
  object-fit: cover; /* 确保图片不会变形 */
}
.circle-img2 {
  margin-top: 18px;
  margin-left: 18px;
  height: 25px;
  width: 25px;
  object-fit: cover; /* 确保图片不会变形 */
}

.text-center {
  color: #a5aaa3;
  margin: 0;
  text-align: center; /* 文字水平居中 */
}

.number {
  font-size: 30px;
  text-align: center; /* 文字水平居中 */
}
</style>